/*
 * @(#) ExcelInput.js
 *
 * <br> Copyright:  Copyright (c) 2017
 * <br>
 * <br> @author caijinhuang
 * <br> 2017-12-10 21:22:13
 */
import React from 'react';
import FileUpload  from "react-fileupload";
import {
    SiteHeader,
    NavItem,
    NavDropdown,
    MenuItem,
    NavSearch,
    Panel,
    Form,
    Modal,
    FormControl,
    Button,
    FormGroup,
    ControlLabel,
    Icon,
    Paragraph
} from '@share/shareui';


class ExcelInput extends React.Component{
    baseUrl_  = "/sharemeeting";
    constructor(){
        super();
        this.state = {
            show:false
        }
    }

    closeAll(){
        this.setState({show:false});
    }

    showNow(){
        this.setState({show:true});
    }

    render(){
        let options = {
            baseUrl:this.baseUrl_+"/user/upload.do",
            param:{//作为get的附加参数
            },
            accept:'.xls,.xlsx',//限制文件类型后缀
            dataType:"json/text",//response格式
            multiple:false,//多文件上传
            withCredentials:true,//与 xhr.withCredentials 一致,
            chooseAndUpload:true,//选中并上传
            fileFieldName(file){ return "file" },//设置文件名称作为参数
            uploadSuccess : function(resp){
                if(resp.state=true){
                    alert(resp.msg);
                }
            },
            uploadError : function(resp){
                alert("导入错误,请检查文件信息是否有误");
            },
            uploadFail : function(resp){
                alert("导入失败，请检查文件信息是否有误")
            },
            //上传前的检查
            beforeUpload : function(files,mill){},
            uploading : function(files,mill){
                console.log("文件",files.name+"正在上传");
            },
        };



        return(
            <div>
                <span onClick={this.showNow.bind(this)}><Icon className="fa fa-folder-open"/> 用户导入</span>
                <Modal show={this.state.show} onHide={this.closeAll.bind(this)}>
                    <Modal.Header closeButton>
                        <Modal.Title id="contained-modal-title-lg">批量注册</Modal.Title>
                    </Modal.Header>
                    <Modal.Body>
                        <Panel.Body full>
                            <Paragraph bsStyle="warning"><i className="fa fa-info-circle text-info"/> 如果已经有用户信息xml格式模板，可以直接导入；如果还没有请先下载模板完善信息后导入</Paragraph>
                            <Form pageType="addPage">
                                <Form.Table>
                                    <Form.Tr>
                                        <Form.Content>
                                            <FileUpload options={options} ref="File-Upload">
                                                <a href="/sharemeeting/file/用户信息采集表.xlsx"><Icon className="fa fa-cloud-download"/> 模板下载</a>
                                            </FileUpload>
                                        </Form.Content>
                                        <Form.Content>
                                            <FileUpload options={options} ref="File-Upload">
                                                <span ref="chooseAndUpload" style={{"cursor": "pointer"}}><Icon className="fa fa-cloud-upload"/> 直接导入</span>
                                            </FileUpload>
                                        </Form.Content>
                                    </Form.Tr>
                                </Form.Table>
                            </Form>
                        </Panel.Body>
                    </Modal.Body>
                    <Modal.Footer>
                        <Button onClick={this.closeAll.bind(this)}>确定</Button>
                    </Modal.Footer>
                </Modal>

            </div>
        );
    }
}
export default ExcelInput
